<template>
	<view class="content">
		<block>
			<view class="avatar_box">
				<view class="avatar">
					<image style="width: 200rpx;height: 200rpx;" :src="petfilesForm.headImgUrl"></image>
					<view @click="getAvatarPic()" class="edit" :style="{ backgroundColor: template.color.temp_color }">
						<uv-icon name="camera" size="20" color="#fff"></uv-icon>
					</view>
				</view>
			</view>
			<view class="form_box">
				<view class="label borderBtn">
					<view class="title">
						<span>*</span>
						中文名字
					</view>
					<view class="input"><input type="text" v-model="petfilesForm.name" placeholder="请输入猫咪中文名字" placeholder-style="color:#bbb;" /></view>
				</view>
				<view class="label">
					<view class="title">英文名字</view>
					<view class="input"><input type="text" v-model="petfilesForm.englishName" placeholder="请输入猫咪英文名字" placeholder-style="color:#bbb;" /></view>
				</view>
			</view>
			<view class="form_box">
				<view class="label borderBtn">
					<view class="title">猫咪性别</view>
					<view class="input">
						<view class="tag" @click="changeSex(1)" :class="{ atag: petfilesForm.sex ==1 }">
							<aicon type="xingbie-nan" size="12"></aicon>
							<span>男孩</span>
						</view>
						<view class="tag" @click="changeSex(0)" :class="{ atag: petfilesForm.sex == 0 }">
							<aicon type="xingbie-nv" size="12"></aicon>
							<span>女孩</span>
						</view>
					</view>
				</view>
				<view class="label borderBtn">
					<view class="title">
						<span>*</span>
						猫咪品种
					</view>
					<view class="input" @click="showPopup1">
						<view v-if="petfilesForm.breed" class="time">{{ petfilesForm.breed }}</view>
						<view v-else class="time" style="color: #bbb;">点击选择猫咪品种</view>
					</view>
				</view>
				<view class="label borderBtn">
					<view class="title">出生日期</view>
					<view class="input" @click="openSelectDateTap('birthDay')">
						<view v-if="petfilesForm.birthDay" class="time">{{ petfilesForm.birthDay }}</view>
						<view v-else class="time" style="color: #bbb;">点击选择出生日期</view>
					</view>
					<!-- <view class="input"><input type="text" v-model="petfilesForm.birthDay" placeholder="请输入出生日期" placeholder-style="color:#bbb;" /></view> -->
				</view>
				<view class="label">
					<view class="title">是否绝育</view>
					<view class="input">
						<view class="tag" @click="changeNeuterStatus(1)" :class="{ atag: petfilesForm.neuterStatus ==1 }">
							<aicon type="xingbie-nan" size="12"></aicon>
							<span>是</span>
						</view>
						<view class="tag" @click="changeNeuterStatus(0)" :class="{ atag: petfilesForm.neuterStatus == 0 }">
							<aicon type="xingbie-nv" size="12"></aicon>
							<span>否</span>
						</view>
						<!-- <uv-switch size="23" activeColor="#2979ff" :activeValue='false' :inactiveValue="true" inactiveColor="#fff"  v-model="petfilesForm.neuterStatus== 0 ? false : true"> -->
					</view>		
				</view>
			</view>
			<view class="form_box">
				<view class="label borderBtn">
					<view class="title">
						<span>*</span>
						主人电话
					</view>
					<view class="input"><input type="text" v-model="petfilesForm.masterMobile" placeholder="请输入主人联系电话" placeholder-style="color:#bbb;" /></view>
				</view>
				<view class="label borderBtn">
					<view class="title">主人微信</view>
					<view class="input"><input type="text" v-model="petfilesForm.masterWechat" placeholder="请输入主人微信号码" placeholder-style="color:#bbb;" /></view>
				</view>
				<view class="label">
					<view class="title">居住地址</view>
					<view class="input">
						<input type="text" v-if="petfilesForm.currentAddress" v-model="petfilesForm.currentAddress" placeholder="请输入居住地址" placeholder-style="color:#bbb;" />
						<view v-else class="time" @click="getLocationTap()" style="color: #bbb;">点击选择居住地址</view>
					</view>
				</view>
			</view>
			<view class="form_box">
				<view class="label borderBtn">
					<view class="title">
						<span>*</span>
						购买门店
					</view>
					<view class="input" @click="storeShow">
						<view v-if="petfilesForm.extJson.businessName" class="time">{{ petfilesForm.extJson.businessName }}</view>
						<view v-else class="time" style="color: #bbb;">点击选择购买门店</view>
					</view>
					
				</view>
				<view class="label">
					<view class="title">购买日期</view>
					<view class="input" @click="openSelectDateTap('buyDate')">
						<view v-if="petfilesForm.buyDate" class="time">{{ petfilesForm.buyDate }}</view>
						<view v-else class="time" style="color: #bbb;">点击选择购买日期</view>
					</view>
					<!-- <view class="input"><input type="text" v-model="petfilesForm.buyDate" placeholder="请输入购买日期" placeholder-style="color:#bbb;" /></view> -->
				</view>
			</view>
			<view class="pic_box">
				<view class="pic" v-for="(item, index) in petfilesForm.rarchivesImages" :key="index" style="border-style:none;">
					<image style="width: 200rpx;" :src="item" mode="widthFix" @click="dianji"></image>
					<view class="close" @click="delePicTap(index)"><uv-icon name="trash" size="20" color="#fff"></uv-icon></view>
				</view>
				<view v-if="petfilesForm.rarchivesImages.length < 3" class="pic" @click="getUploadFile()">
					<uv-icon name="photo" size="28" color="#bbb"></uv-icon>
					<span>猫咪照片</span>
				</view>
			</view>
			<view class="button_box">
				<view class="button" @click="getPetfilesEdit()" :style="{ backgroundColor: template.color.temp_color }">保存猫咪信息</view>
				<view v-if="petfilesForm.id" class="button del" @click="delCarInfoTap()">删除猫咪信息</view>
			</view>
		</block>
		<!-- <block v-else>
			<view class="none_list_box" style="height: 85vh;">
				<image src="../../static/images/none_icon_01.png" mode="aspectFill"></image>
				<span>该内容暂未开放，敬请关注!</span>
			</view>
		</block> -->

		
		<uv-datetime-picker ref="datetimePicker" v-model="value" mode="date" @confirm="confirm">
				</uv-datetime-picker>
		<!-- <uv-picker :show="storeShow" :columns="storeColumns" keyName="title" @close="storeShow = false" @cancel="storeShow = false" @confirm="selectStoreTap"></uv-picker> -->
		<uv-picker ref="picker" :columns="columns" @confirm="confirmpicker" keyName="businessName" ></uv-picker>
		<uv-popup ref="popup1" :round="20" mode="bottom" closeable @close="close1" @open="open1">
			<view class="cat_show_box">
				<view class="head">选择猫咪品种</view>
				<scroll-view scroll-y scroll-with-animation class="cat_list">
					<view
						class="list"
						v-for="(item, index) in carTypeList"
						:key="index"
						:style="{ borderBottomStyle: index + 1 === carTypeList.length ? 'none' : 'dashed' }"
						@click="selectCarTap(item.title)"
					>
						<view class="image"><image :src="item.icon" mode="aspectFill" ></image></view>
						<view class="title">{{ item.title }}</view>
						<!-- <view class="select">
							<uv-icon v-if="petfilesForm.varieties === item.title" name="photo" color="#2979ff" size="28"></uv-icon>
							<uv-icon v-else name="photo" color="#2979ff" size="28"></uv-icon>
							<aicon v-if="petfilesForm.varieties === item.title" type="xuanzhong1" size="20" :color="template.color.temp_color"></aicon>
							<aicon v-else type="weixuanzhong" size="20" color="#bbb"></aicon>
						</view> -->
					</view>
					<view style="height: 60rpx;"></view>
				</scroll-view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
const app = getApp();
import {
	searchPlugsPetRarchivesList,
	insertPlugsPetRarchives,
	delPlugsPetRarchives,
	updatePlugsPetRarchives,
	searchPlugsPetRarchivesById,
	uploadImages,
	getBusinessInfoList
} from '../../../utils/api.js';
export default {
	data() {
		return {
			versionStatus: __wxConfig.envVersion === 'release',
			template: uni.getStorageSync('__ddminiTemplateConfig'),
			petfilesForm: {
				accountBookExtJson: '',
				adminId: 0,
				anthelminticExtJson: '',
				anthelminticStatus: 0,
				birthDay: '',
				breed: '',
				businessId: 0,
				buyBusinessId: 0,
				buyDate: '',
				categoryId: 0,
				currentAddress: '',
				englishName: '',
				
				growthRecordExtJson: '',
				headImgUrl: 'https://oss.daccf.com/zwnmfe1p572r9r3ycu480/图标/9c23dc67-fa4b-4f20-b96e-3750ab2ee8a7.png',
				id: 0,
				masterMobile: '',
				masterWechat: '',
				name: '',
				neuterStatus: 0,
				rarchivesImages: [],
				sex: 0,
				userId: 0,
				userServiceToken: '',
				vaccineExtJson: '',
				vaccineStatus: 0,
				weightExtJson: '',
				extJson:{
					businessName:''
				}
			},
			value: Number(new Date()),
			dateType: '',
			storeColumns: [],
			carTypeList: [
				{
					title: '英国短毛猫',
					icon: 'http://cdn.sncat.ddyy.top/73f343942a665bb50c288b25d0c9d1df.png'
				},
				{
					title: '布偶猫',
					icon: 'http://cdn.sncat.ddyy.top/6cff6b394f11fc8db2b170c20f666df8.png'
				},
				{
					title: '中华田园猫',
					icon: 'http://cdn.sncat.ddyy.top/c0e4156103a18b46204835f6100225d7.png'
				},
				{
					title: '银渐层',
					icon: 'http://cdn.sncat.ddyy.top/fe2f4f873c742db844997cb4baebe670.png'
				},
				{
					title: '金渐层',
					icon: 'http://cdn.sncat.ddyy.top/5701f7c71bccb5474d872ca70ee75d75.png'
				},
				{
					title: '美国短毛猫',
					icon: 'http://cdn.sncat.ddyy.top/d15305a09e2f767dd2ba845381f967ba.png'
				},
				{
					title: '串串猫',
					icon: 'http://cdn.sncat.ddyy.top/fca08533a65f2785f007ace5a9cfad66.png'
				},
				{
					title: '曼基康猫',
					icon: 'http://cdn.sncat.ddyy.top/09de6a1c33c9406e944d0b135e3a180b.png'
				},
				{
					title: '加菲猫',
					icon: 'http://cdn.sncat.ddyy.top/a184479452808dbab5409f8f4bcc50f5.png'
				},
				{
					title: '虎斑猫',
					icon: 'http://cdn.sncat.ddyy.top/6bd04745332117211d656b71cd3f7a33.png'
				},
				{
					title: '暹罗猫',
					icon: 'http://cdn.sncat.ddyy.top/c8db729ee95992e708220ca4a67caa68.png'
				},
				{
					title: '无毛猫',
					icon: 'http://cdn.sncat.ddyy.top/489b46ecc62f6bbbd88f157b4cc87bdc.png'
				},
				{
					title: '狸花猫',
					icon: 'http://cdn.sncat.ddyy.top/515aa83e3c6ab2226d6da26baa6d91a0.png'
				},
				{
					title: '缅因猫',
					icon: 'http://cdn.sncat.ddyy.top/1ba99118302a8f331ebb83b6feab8dd1.png'
				},
				{
					title: '金吉拉猫',
					icon: 'http://cdn.sncat.ddyy.top/057d1d2e5ee85347be66d2dec16b44a9.png'
				},
				{
					title: '德文卷猫',
					icon: 'http://cdn.sncat.ddyy.top/2ab7b8574f97bade5a08782ff2ee441c.png'
				},
				{
					title: '孟加拉豹猫',
					icon: 'http://cdn.sncat.ddyy.top/1f4465058c6e0185ad1e8f159a76e262.png'
				},
				{
					title: '波斯猫',
					icon: 'http://cdn.sncat.ddyy.top/3ae17cf55fa1efde31512d4b05aa2163.png'
				},
				{
					title: '安哥拉猫',
					icon: 'http://cdn.sncat.ddyy.top/62392a03af59c8bb9f8eb0f05651fcd5.png'
				},
				{
					title: '俄罗斯猫',
					icon: 'http://cdn.sncat.ddyy.top/1bedf23d7a7d0fe0cae7451f97064a3a.png'
				},
				{
					title: '苏格兰折耳猫',
					icon: 'http://cdn.sncat.ddyy.top/b010bc2f50618ee3cf8ff243c95f6480.png'
				},
				{
					title: '东方猫',
					icon: 'http://cdn.sncat.ddyy.top/0c6db4f71c223917489d321db7f33611.png'
				},
				{
					title: '阿比西尼亚猫',
					icon: 'http://cdn.sncat.ddyy.top/7352d366dbc3c0bcdb1aa55197a2c7d2.png'
				},
				{
					title: '孟买猫',
					icon: 'http://cdn.sncat.ddyy.top/1aa3c07cf927d89474ddf50b71fc060d.png'
				},
				{
					title: '西伯利亚森林猫',
					icon: 'http://cdn.sncat.ddyy.top/ac5046b9d2e1df32e7a1115918825bb2.png'
				},
				{
					title: '挪威森林猫',
					icon: 'http://cdn.sncat.ddyy.top/a9377ba3b9373adb4422101125471032.png'
				},
				{
					title: '喜马拉雅猫',
					icon: 'http://cdn.sncat.ddyy.top/1480d5c480a4fdc268d1222dfca0579b.png'
				},
				{
					title: '柯尼斯卷毛猫',
					icon: 'http://cdn.sncat.ddyy.top/9adb572c74619fcb758ab1e98ec716c6.png'
				},
				{
					title: '埃及猫',
					icon: 'http://cdn.sncat.ddyy.top/135fee04b0b721933a8abfc5ae0665a2.jpg'
				},
				{
					title: '伯曼猫',
					icon: 'http://cdn.sncat.ddyy.top/0e62a68f0d0a18e4d6179e21d1d9ad8c.png'
				},
				{
					title: '土耳其梵猫',
					icon: 'http://cdn.sncat.ddyy.top/dfb4a0d0bc00a661cb923d1806467e76.png'
				},
				{
					title: '新加坡猫',
					icon: 'http://cdn.sncat.ddyy.top/e09d732a32e5094cfb67903eefb3742e.png'
				},
				{
					title: '日本短尾猫',
					icon: 'http://cdn.sncat.ddyy.top/cd980cc315bf340e62bccf47054b93e5.png'
				}
			],
			catId: '',
			columns: []
								
							
		};
	},
	onLoad(e) {
		let self = this;
		if (e.id) {
			self.catId = e.id;
			self.getPetfilesList();
		}
		// if (self.versionStatus) {
		// 	self.getStoresList();
		// }
		this.getBusinessInfoList()
	},
	methods: {
		changeSex(index){
			this.petfilesForm.sex=index
		},
		changeNeuterStatus(index){
			this.petfilesForm.neuterStatus=index
		},
		
		showPopup1() {
			this.$refs.popup1.open();
		},
		close1() {
			this.$refs.popup1.close();
		},
		getPetfilesList() {
			let self = this;
			let postData = {
				page: 1,
				sizes: 1,
				id: self.catId
			};
			searchPlugsPetRarchivesById(postData).then(res => {
				if (res.code ==200) {
					this.petfilesForm = res.body;
						if(this.petfilesForm.rarchivesImages){
							this.petfilesForm.rarchivesImages =JSON.parse(this.petfilesForm.rarchivesImages);
						}
						if(this.petfilesForm.extJson){
							this.petfilesForm.extJson =JSON.parse(this.petfilesForm.extJson);
						}
						
				}
			});
		},
	
		// formatter(type, value) {
		// 	if (type === 'year') {
		// 		return `${value}年`;
		// 	}
		// 	if (type === 'month') {
		// 		return `${value}月`;
		// 	}
		// 	if (type === 'day') {
		// 		return `${value}日`;
		// 	}
		// 	return value;
		// },
		openSelectDateTap(type) {
			
			this.$refs.datetimePicker.open();
			this.dateType=type
			// setTimeout(function() {
			// 	self.$refs.datetimePicker.setFormatter(self.formatter);
			// }, 800);
		},
		confirm(e) {
						console.log('confirm', this.getTimeText(e.value));
						if(this.dateType=='birthDay'){
							this.petfilesForm.birthDay=this.getTimeText(e.value)
						}if(this.dateType=='buyDate'){
							this.petfilesForm.buyDate=this.getTimeText(e.value)
						}
						
					},
		// selectTimeTap(e) {
		// 	let self = this;
		// 	self.petfilesForm[self.dateType] = e.value;
		// 	self.dateShow = false;
		// },
		getTimeText(e) {
			let date = new Date(e);
			let year = date.getFullYear();
			let month = date.getMonth() + 1 < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			let days = date.getDate() < 9 ? '0' + date.getDate() : date.getDate();
			let str = `${year}-${month}-${days} 00:00:00`;
			return str;
		},
		getBusinessInfoList(){
			getBusinessInfoList().then(res => {
				console.log(this.columns[0]);
				if (res.code == 200) {
					// this.$nextTick(()=>{
						let list=[]
						res.body.forEach((item)=>{
							list.push(item.jsonViewData)
						})
						this.columns.push(list)
					
					
				}
			});
		},
		storeShow(){
			this.$refs.picker.open();
		},
		confirmpicker(e){
			console.log(e);
			this.petfilesForm.extJson.businessName=e.value[0].businessName
		},
		
		getAvatarPic() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				loop: true,
				success: res => {
					console.log(res);
					let data = {
						file: res.tempFilePaths[0], //你要传的临时文件
						type: 1
					};
					uploadImages(data).then(ress => {
						if (ress.code == 200) {
							that.petfilesForm.headImgUrl = ress.body;
						}
					});
				}
			});
		},
		getUploadFile() {
			let self = this;
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				loop: true,
				success: res => {
					console.log(res);
					let data = {
						file: res.tempFilePaths[0], //你要传的临时文件
						type: 1
					};
					uploadImages(data).then(ress => {
						if (ress.code == 200) {
							that.petfilesForm.rarchivesImages.push( ress.body);
						}
					});
				}
			});
			// let count = 3 - self.petfilesForm.pics.length;
			// if (count >= 1) {
			// 	uni.chooseImage({
			// 		count: count,
			// 		sizeType: ['compressed'],
			// 		success(ces) {
			// 			tempFilePaths = ces.tempFilePaths;
			// 			uploadFile();
			// 		}
			// 	});
			// } else {
			// 	uni.showModal({
			// 		content: '最多上传3张图片',
			// 		showCancel: false,
			// 		confirmColor: self.template.color.temp_color
			// 	});
			// }
		},
		dianji() {
			uni.previewImage({
				urls: this.petfilesForm.rarchivesImages, // 需要预览的图片链接列表
				
			});
		},
		delePicTap(index) {
			this.petfilesForm.rarchivesImages.splice(index, 1);
		},
		getLocationTap() {
			let self = this;
			uni.chooseLocation({
				success(ces) {
					self.petfilesForm.currentAddress = ces.address;
				}
			});
		},
		selectCarTap(title) {
			this.petfilesForm.breed = title;
			this.$refs.popup1.close();
		},
		getPetfilesEdit() {
			console.log(this.petfilesForm);
			let self = this;
			let data = self.petfilesForm;
			if (!data.name) {
				uni.showModal({
					content: '请输入猫咪名字',
					showCancel: false,
					
				});
				return;
			}
			if (!data.breed) {
				uni.showModal({
					content: '请选择猫咪品种',
					showCancel: false,
				});
				return;
			}
			if (!data.masterMobile) {
				uni.showModal({
					content: '请输入联系电话',
					showCancel: false,
				});
				return;
			}
			if (!data.extJson.businessName) {
				uni.showModal({
					content: '请选择购买门店',
					showCancel: false,
				});
				return;
			}
			if(data.rarchivesImages){
				data.rarchivesImages=JSON.stringify(data.rarchivesImages)
			}
			if(data.extJson){
				data.extJson=JSON.stringify(data.extJson)
			}
			if(!self.catId){
				insertPlugsPetRarchives(data).then(res => {
					if (res.code ==200) {
						uni.showToast({
							icon:'none',
							title:'猫咪资料添加成功'
						})
						setTimeout(()=>{
							uni.navigateBack();
						},600)
						
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false,
						});
					}
				});
			}else{
				updatePlugsPetRarchives(data).then(res => {
					if (res.code ==200) {
						uni.showToast({
							icon:'none',
							title:'猫咪资料保存成功'
						})
						setTimeout(()=>{
							uni.navigateBack();
						},600)
						
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false,
						});
					}
				});
			}
			
		},
		delCarInfoTap() {
			let self = this;
			uni.showModal({
				title: '删除确认',
				content: '猫咪信息错误您可以重新编辑，删除后信息将不可恢复，是否确定删除？',
				cancelColor: '#999',
				
				success(ces) {
					if (ces.confirm) {
						let postData = {
							ids: `${self.petfilesForm.id}`,
							
						};
						delPlugsPetRarchives(postData).then(res => {
							if (res.code == 200) {
								uni.showToast({ title: '删除成功' });
								setTimeout(function() {
									uni.navigateBack();
								}, 800);
							} else {
								uni.showModal({
									content: res.msg,
									showCancel: false,
								});
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f4f4f4;
	padding: 20rpx;
}
.avatar_box {
	width: 100%;
	height: 300rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	.avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		position: relative;
		border: 1px solid #ed781b;
		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 100rpx;
		}
		.edit {
			background-color: #ed781b;
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100%;
			bottom: 0;
			right: 10rpx;
		}
	}
}
.form_box {
	margin: 0 auto;
	background-color: #fff;
	border-radius: 30rpx;
	margin-bottom: 40rpx;
	.label {
		width: 90%;
		margin: 0 auto;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title {
			color: #999;
			font-size: 30rpx;
			font-weight: bold;
			width: 160rpx;
			position: relative;
			span {
				position: absolute;
				color: #ed781b;
				left: -20rpx;
				font-size: 26rpx;
			}
		}
		.input {
			flex: 1;
			min-width: 0;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			input {
				width: 100%;
				height: 100%;
				color: #080403;
				font-size: 30rpx;
				text-align: right;
			}
			.tag {
				background-color: #efefef;
				color: #b2b2b2;
				padding: 0 14rpx;
				border-radius: 10rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				margin-left: 30rpx;
				span {
					padding-left: 4rpx;
				}
			}
			.atag {
				background-color: #ed781b;
				color: #fff;
			}
			.time {
				font-size: 30rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.borderBtn {
		border-bottom: 1px dashed #f2f2f2;
	}
}
.pic_box {
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	padding-bottom: 40rpx;
	.pic {
		width: 200rpx;
		height: 200rpx;
		border: 1px dashed #bfbfbf;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #bbb;
		position: relative;
		margin-right: 30rpx;
		image {
			border-radius: 30rpx;
		}
		span {
			padding-top: 10rpx;
		}
		.close {
			position: absolute;
			top: 0;
			right: 0;
			background-color: #ed781b;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
		}
	}
	.pic:nth-child(3) {
		margin-right: 0;
	}
}
.button_box {
	width: 90%;
	margin: 0 auto;
	padding: 20rpx 0 120rpx;
	.button {
		background-color: #ed781b;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		color: #fff;
		border-radius: 100rpx;
		font-weight: bold;
	}
	.del {
		margin-top: 30rpx;
		background-color: #ed781b10;
		color: #ed781b;
	}
}

.cat_show_box {
	.head {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #080403;
		height: 100rpx;
	}
	.cat_list {
		width: 100%;
		max-height: 50vh;
		.list {
			width: 90%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px dashed #efefef;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			height: 100rpx;
			.image {
				width: 110rpx;
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
				}
			}
			.title {
				flex: 1;
				min-width: 0;
				color: #080403;
				font-size: 30rpx;
			}
		}
	}
}
</style>
